<template>
  <view>
    <view class="narbar content" :style="{backgroundImage:'url('+userInfo.icon+')'}">
      <!-- 弹窗 -->
      <view>
        <uni-icons type="settings-filled" size="30" @click="showDrawer('showLeft')"></uni-icons>
        <uni-drawer ref="showLeft" mode="left" :width="320" @change="change($event,'showLeft')">
          <view class="hang">
            <uni-icons type="spinner-cycle" size="25"></uni-icons>
            <text class="wenzi">实名认证</text>
          </view>
          <view class="hang">
            <uni-icons type="more-filled" size="25"></uni-icons>
            <text class="wenzi">钱包</text>
          </view>
          <view class="hang">
            <uni-icons type="shop" size="25"></uni-icons>
            <text class="wenzi">订单</text>
          </view>
          <view class="hang">
            <uni-icons type="cart" size="25"></uni-icons>
            <text class="wenzi">购物车</text>
          </view>
          <view class="hang">
            <uni-icons type="upload-filled" size="25"></uni-icons>
            <text class="wenzi">售后</text>
          </view>
          <view class="hang">
            <uni-icons type="info-filled" size="25"></uni-icons>
            <text class="wenzi">隐私设置</text>
          </view>
          <view class="hang">
            <uni-icons type="eye-filled" size="25"></uni-icons>
            <text class="wenzi">账号安全</text>
          </view>
          <view class="hang">
            <uni-icons type="staff" size="25"></uni-icons>
            <text class="wenzi">联系客户</text>
          </view>
          <view class="hang">
            <uni-icons type="email" size="25"></uni-icons>
            <text class="wenzi">帮助中心</text>
          </view>
          <view class="close">
            <button @click="closeDrawer('showLeft')" size="mini">关于</button>
          </view>
        </uni-drawer>
      </view>
    </view>
    <view class="touxiang">
      <view class="tou">
        <image :src="userInfo.phone" mode="" class="word_img"></image>
      </view>
      <view class="word">
        <view class="word_one">昵称 ： {{userInfo.name}}</view>
        <view class="word_two">个性签名 ： {{userInfo.sign}}</view>
      </view>
    </view>
    <!-- 中部 -->
    <view class="zhong">
      <view class='zhong_one'>关注
        <view class="num">0</view>
      </view>
      <view class='zhong_one'>收藏
        <view class="num">0</view>
      </view>
      <view class='zhong_one'>订阅
        <view class="num">0</view>
      </view>
      <view class='zhong_one'>足迹
        <view class="num">0</view>
      </view>
    </view>
    
    <!-- 内容 -->
    <view class="cangpi" v-for="(item,index) in cangList" :key='index'>
          <view class="img_div">
            <image :src="item" class="cang_img"></image>
          </view>
    </view>
  </view>
</template>

<script>
  export default {
    name:"my-info",
    data() {
      return {
        userInfo:{},
        cangList:[],
        // imageURL: '/static/image_one/z.png',
        showRight: false,
        showLeft: false
      };
    },
    onLoad() {
      this.getSwiper()
    },
    methods: {
    	async getSwiper() {
    	  const {data:res } = await uni.$http.get('/user/person?id=1')
    	  console.log(res.data);
    	  if(res.code !== 200) {
    	    console.log("错误");
    	  }
        this.userInfo = res.data
        this.cangList.push(res.data.photo0)
        this.cangList.push(res.data.photo1)
    	},
      confirm() {},
      // 打开窗口
      showDrawer(e) {
      	this.$refs[e].open()
      },
      // 关闭窗口
      closeDrawer(e) {
      	this.$refs[e].close()
      },
      // 抽屉状态发生变化触发
      change(e, type) {
      	console.log((type === 'showLeft' ? '左窗口' : '右窗口') + (e ? '打开' : '关闭'));
      	this[type] = e
      }
    },
    onNavigationBarButtonTap(e) {
    	if (this.showLeft) {
    		this.$refs.showLeft.close()
    	} else {
    		this.$refs.showLeft.open()
    	}
    },
    // app端拦截返回事件 ，仅app端生效
    onBackPress() {
    	if (this.showRight || this.showLeft) {
    		this.$refs.showLeft.close()
    		this.$refs.showRight.close()
    		return true
    	}
    }
  }
</script>

<style lang="scss">
  .narbar {
    width: 100%;
    height: 330rpx;
    background-size: 100% 100%;
  }
  .touxiang {
    height: 280rpx;
    margin-top: -80rpx;
    margin-left: 20rpx;
    
    .tou {
      width: 150rpx;
      height: 150rpx;
      border-radius: 150rpx;
      overflow: hidden;
      margin-bottom: 20rpx;
      .word_img {
        width: 100%;
        height: 100%;
      }
    }
   .word {
     // display: inline-block;
     .word_one {
        color: #fff;
        font-size: 35rpx;
        font-weight: 600;
        margin-bottom: 20rpx;
     }
     .word_two {
       color: #738296;
        font-size: 25rpx;
        margin-bottom: 30rpx;
     }
   }
  }
  .zhong {
    height: 120rpx;
    width: 94%;
    margin: 30rpx auto;
    background-color: #273343;
    border-radius: 20rpx;
    .zhong_one {
      display: inline-block;
      text-align: center;
      width: 23%;
      height: 120rpx;
      margin: 20rpx auto;
      margin-left: 10rpx;
      color: #738296;
      font-size: 27rpx;
      letter-spacing: 10rpx;
      font-weight: 500;
      .num {
        color: #fff;
        font-size: 35rpx;
        font-weight: 600;
      }
    }
  }
 .cangpi {
   display: inline-block;
   width: 45%;
   height: 500rpx;
   margin: 10rpx 0;
   margin-left: 25rpx;
   border-radius: 10px;
   overflow: hidden;
   position: relative;
   background-color: #253143;
   .img_div {
      width: 90%;
      height: 90%;
      margin: 15rpx auto;
      overflow: hidden;
      border-radius: 20rpx;
     .cang_img {
       width: 100%;
       height: 100%;
     }
   }

   .cang_name {
     position: absolute;
     bottom: 10%;
     left: 10%;
     color: #fff;
     font-size: 30rpx;
     font-weight: 500;
   }
  }
  // 按钮

  .scroll-view {
  	/* #ifndef APP-NVUE */
  	width: 100%;
  	height: 100%;
  	/* #endif */
  	flex:1
  }
  // 处理抽屉内容滚动
  .scroll-view-box {
  	flex: 1;
  	position: absolute;
  	top: 0;
  	right: 0;
  	bottom: 0;
  	left: 0;
  }
  .info {
  	padding: 15px;
  	color: #666;
  }
  
  .info-text {
  	font-size: 14px;
  	color: #666;
  }
  .info-content {
  	padding: 5px 15px;
  }
  .close {
  	padding: 10px;
  }
  .hang {
    justify-content: center;
    align-items: center;
    margin-bottom: 30rpx;
    .wenzi {
      margin-left: 20rpx;
      font-size: 30rpx;
    }
  }

</style>